<template>
    <q-card class="kanban-column min-w-60" :class="[`bg-${列.颜色}`]" :data-column-value="列.状态">
        <q-item>
            <q-item-section>
                <q-item-label class="text-bold">{{ 列.状态 }}</q-item-label>
            </q-item-section>
        </q-item>
        <q-separator />
        <q-card-section>
            <div class="kanban-cards q-gutter-sm" ref="kanbanCardsRef" :style="{ height: kanbanCardsHeight }"
                :data-列名="列.状态">
                <template v-for="item in 过滤卡组" :key="item.id">
                    <a看板卡 :卡="item" />
                </template>
            </div>
        </q-card-section>
    </q-card>
</template>

<script setup>
import { reactive, nextTick, onMounted, computed, ref } from 'vue';
import Sortable from 'sortablejs';
import a看板卡 from './a看板卡.vue';

const props = defineProps({
    列: {},
    卡组: Array,
});

const 过滤卡组 = computed(() => {
    return props.卡组.filter((item) => {
        return item.状态 === props.列.状态;
    });
});

const kanbanCardsRef = ref(null);
const showAddCard = ref(true);
const kanbanCardsHeight = ref('auto');

function setup_sortable() {
    Sortable.create(kanbanCardsRef.value, {
        group: "cards",
        animation: 150,
        dataIdAttr: "data-name",
        forceFallback: true,
        onStart: () => {
            showAddCard.value = false;
            kanbanCardsHeight.value = "100vh";
        },
        onEnd: (e) => {
            console.log(`e 👉`, e);
            showAddCard.value = true;
            kanbanCardsHeight.value = "auto";
            // update order
            const from列名 = e.from.dataset.列名;
            const to列名 = e.to.dataset.列名;
            const args = {
                from列名,
                to列名,
                oldIndex: e.oldIndex,
                newIndex: e.newIndex,
            };
            console.log(args); // 可以根据需求进一步处理 args
        },
        onAdd: () => { },
    });
}

onMounted(() => {
    setup_sortable();
});
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.2s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}
</style>